<template>
	<div style='overflow-x:hidden;' >
		<HeaderTitle headerTitle='订单提交' icon='el-icon-arrow-left' @headerGo='headerGo' />
		<div style='padding-top:45px;margin-bottom:50px;'>
			<!-- 没有地址显示组件 -->
			<div v-if='!address'>
				<AddAddress 
					@addressChange='addAddress' 
				/>
			</div>
			<!-- 有地址显示组件 -->
			<div v-if='address'>
				<HaveAddress 
					:name='address.addressdetailed' 
					:phone='address.contactphone' 
					:address='handleAddress(address.whereaddress)' 
					:offIcon='true'
					@addressChange='changeAddress'
				/>
			</div>
			<Bar></Bar>
			<!-- 商品价格展示 -->
			<!-- <div>
				<PriceInfo :allMoney='handleMoney()'/>
			</div> -->
			<Bar></Bar>
			<!-- 商品信息展示 -->
			<div v-for="(val,index) in allGoods" :key='index'>
				<div>
					<OrderInfo 
					    :val='val'
					></OrderInfo>
				</div>
			</div>
			<div class='order-bottom'>
				<SubmitOrder @submitOrder='submitOrder' :money='handleMoney()' :loading='loading'></SubmitOrder>
			</div>
		</div>
	</div>
</template>

<script>
import {
   ORDER_SUBMIT,
   _layer,
   _money,
   GET_ADDRESS,
   PAY
} from "@/comm.js";
import HeaderTitle from "@/components/HeaderTitle.vue";
import Bar from "@/components/Bar.vue";
import AddAddress from "@/components/ordervue/AddAddress.vue";
import PriceInfo from "@/components/ordervue/PriceInfo.vue";
import OrderInfo from "@/components/ordervue/OrderInfo.vue";
import SubmitOrder from "@/components/ordervue/SubmitOrder.vue";
import HaveAddress from "@/components/ordervue/HaveAddress.vue";
export default {
    data() {
        return {
          allPri:0,//总价
        	loading:false,
          allGoods:[],
          address:{
           	addressdetailed:'代斌',
           	contactphone:'18873089765',
           	whereaddress:'[{"id":22,"value":"天津市"},{"id":23,"value":"天津市"},{"id":24,"value":"和平区"}]'
          },
        };
    },
    components: {
        HeaderTitle,
        AddAddress,
        Bar,
        PriceInfo,
        OrderInfo,
        SubmitOrder,
        HaveAddress
    },
    beforeCreate(){

      //拉取商品要提交的订单数据
      $.get(ORDER_SUBMIT,(data)=>{
        console.log('订单提数据')
        console.log(data);

        if(data.state){
            this.allGoods=data.data;
            for(let val of data.data){
              this.allPri+=val.priceSum;
            }
        }else{
          _layer(data.msg);
        }

      });

      //拉取地址信息
      $.get(GET_ADDRESS,(data)=>{
        console.log('地址');
        console.log(data);
        data.state?data.data.length?this.address=data.data[0]:this.address=false:_layer(data.msg);
        // data.data.length?this.address=data.data[0]:_layer(data.msg);
      });
    },
    methods:{
        headerGo(){},
        //地址切换
        addressChange(){},
        
        handleMoney(){
          return _money(this.allPri);
        },
        //添加地
        addAddress(){
          this.$router.push({path:'/changeAddress'});
        },
        //修改地址
        changeAddress(){
          this.$router.push({path:'/changeAddress',query:{'address':this.address}});
        },
        //处理地址详情
        handleAddress(str){
           let address=JSON.parse(str);
           let addStr='';
           for(let val of address){
              addStr+=val.value;
           }
           return addStr;
        },
        //提交订单
        submitOrder(){
          alert(1);
          $.get(PAY,(data)=>{
            console.log('支付返回');
            console.log(data);
            // this.testPay(data);
          })
        },
        //去支付
        // testPay(pay) {
        //   $.ajax({
        //       type: "POST",
        //       url: "http://yydm.ngrok.xiaomiqiu.cn/wechat/pay/wxpay?userToken="+userToken,
        //       success: function (result) {
        //           if(result.state){
        //               WeixinJSBridge.invoke(
        //                   'getBrandWCPayRequest', {
        //                       "appId":result.data.appId,     //公众号名称，由商户传入
        //                       "timeStamp":result.data.timeStamp,         //时间戳，自1970年以来的秒数
        //                       "nonceStr":result.data.nonceStr, //随机串
        //                       "package":result.data.packageValue,
        //                       "signType":result.data.signType,         //微信签名方式：
        //                       "paySign":result.data.paySign //微信签名
        //                   },
        //                   function(res){
        //                       if(res.err_msg == "get_brand_wcpay_request:ok" ){
        //                         alert('支付成功')
        //                           // 使用以上方式判断前端返回,微信团队郑重提示：
        //                           //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        //           // window.location.reload();
        //                       }else {
        //                           alert("支付失败")
        //                       }
        //                   }
        //               );
        //               if (typeof WeixinJSBridge == "undefined"){
        //                   if( document.addEventListener ){
        //                       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        //                   }else if (document.attachEvent){
        //                       document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        //                       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        //                   }
        //               }else{
        //                   onBridgeReady();
        //               }
        //           }
        //       },
        //   });
        // },
    }
};
</script>

<style scoped>
.order-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
}
.order-remark {
    height: 50px;
}
.order-remark input {
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    font-size: 12px;
    border: none;
    outline: none;
}
</style>